<template>
 <el-dialog :close-on-click-modal="false" :title="form.id ? t('common.editBtn') : t('common.addBtn')"
             draggable v-model="visible" width="900">
    <div class="flex gap-4">
        <!--左侧部分-->
        <div class="w-1/3">
            <div class="grid gap-4">
                <el-button type="primary" @click="handleReturn">
                    {{t('aigcKnowledge.knowledgeListTip')}}
                </el-button>
                <div class="flex items-center gap-2">
                    <div class="relative bg-blue-100 p-2 rounded">
                        <SvgIcon class="text-lg" icon="ep:document" />
                    </div>
                    <span class="font-seibold text-[16px]">{{knowledge.name}}</span>
                </div>
                <div class="text-[13px] text-gray-400 mt-3" >
                    {{knowledge.remark}}
                </div>
            </div>
            <el-divider/>
            <div class="flex flex-col gap-2">
                <div class="text-xs"> {{t('aigcKnowledge.id')}}</div>
                <el-input v-model="knowledge.id" readonly/>
            </div>
            <div class="flex flex-col gap-2">
                <div class="text-xs"> {{t('aigcKnowledge.embedStoreId')}}</div>
                <div v-if="knowledge.embedStore==null">{{t('aigcKnowledge.inputEmbedStoreIdTip')}}</div>
                <el-input v-else v-model="knowledge.embedStore.name" readonly/>
            </div>
            <div class="flex flex-col gap-2">
                <div class="text-xs"> {{t('aigcKnowledge.embedModelId')}}</div>
                <div v-if="knowledge.embedModel==null">{{t('aigcKnowledge.inputEmbedModelIdTip')}}</div>
                <el-input v-else v-model="knowledge.embedModel.name" readonly/>
            </div>
        </div>
        <!--右侧区域-->
        <div class="w-2/3">
            <el-tabs v-model="active">
                <el-tab-pane :label="t('aigcKnowledge.dataImportTip')" :name="1"></el-tab-pane>
                <el-tab-pane :label="t('aigcKnowledge.docManageTip')" :name="2"></el-tab-pane>
                <el-tab-pane :label="t('aigcKnowledge.docSliceManageTip')" :name="3"></el-tab-pane>
                <el-tab-pane :label="t('aigcKnowledge.embedSearchTip')" :name="4"></el-tab-pane>
            </el-tabs>
            <div class="mt-4">
                <import-file v-if="active =='1' " :data="knowledge" :fileType="fileTypes"></import-file>
                <docs-list v-if="active =='2' " :data="knowledge"></docs-list>
                <docs-slice v-if="active =='3' " :data="knowledge"></docs-slice>
                <docs-slice-search v-if="active =='4' " :data="knowledge"></docs-slice-search>
            </div>
        </div>
    </div>
</el-dialog>
</template>

<script setup lang="ts" name="aigcKnowledgeTab">
    import {useI18n} from "vue-i18n";
    import {getObj} from "/@/api/aigc/knowledge";
    import {useMessage,useMessageBox} from "/@/hooks/message";
    import {useRouter} from 'vue-router';
    // 异步组件
    const ImportFile=defineAsyncComponent(()=>import('./importFile/index.vue'));
    const DocsList=defineAsyncComponent(()=>import('./docsList/index.vue'));
    const DocsSlice=defineAsyncComponent(()=>import('./docsSlice/index.vue'));
    const DocsSliceSearch = defineAsyncComponent(()=>import('./docsSliceSearch/index.vue'));

    const { t } = useI18n();
    //.txt、 .md、 .docx、 .doc、.pdf、.pptx、 .ppt、.xlsx、 .xls、.html、.json、.xml、.epub、.txt、.rtf
    const fileTypes = ['docx','doc','pdf','pptx','ppt','xlsx','xls','json','xml','txt','md','epub','rtf'];

    //是否显示
    const visible = ref(false);
    const loading = ref(false);
    // 路由信息
    const router = useRouter();
    // 激活的tab页
    const active = ref('1')
    const knowledge = ref<any>({});
    //form 表单数据
    const form=reactive({
        id:'',
    });
    // 返回
    const handleReturn=()=>{
        router.back(-1);
    }
    //打卡对话框
    const openDialog = (id:string) => {
         visible.value = true;
         form.id = '';
         // 获取信息
         if (id) {
            form.id = id;
            getData(id);
         }
    }
    // 获取数据
    const getData=(id:string)=>{
        loading.value = true;
        getObj(id).then((res)=>{
            knowledge.value = res.data;
        });
    }
    // 暴露方法
    defineExpose({
        openDialog
    });
</script>